<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
    <title>课程信息</title>
    <link rel="stylesheet" href="/bootstrap/css/bootstrap.min.css" crossorigin="anonymous">
    <style>
        body {
            display: flex;
            flex-direction: column;
            min-height: 100vh;
            margin: 0;
        }

        /* 中间内容区域样式 */
        .middle-content {
            display: flex;
            flex: 1;
        }

        /* 内容区域样式 */
        .content {
            flex: 1;
            padding: 20px;
            overflow-y: auto;
        }

        /* 隐藏内容默认样式 */
        .tab-content > div {
            display: none;
        }

        .tab-content > div.active {
            display: block;
        }

        /* 操作按钮样式调整 */
        .action-buttons {
            white-space: nowrap; /* 防止按钮换行 */
        }

        .action-buttons a {
            margin-right: 5px; /* 调整按钮间距 */
        }

        .action-buttons a:last-child {
            margin-right: 0; /* 最后一个按钮不需要右边距 */
        }

    </style>
    <script>
        function showContent(tabId) {
            const tabContents = document.querySelectorAll('.tab-content > div');
            tabContents.forEach(content => {
                content.classList.remove('active');
            });
            const selectedTab = document.getElementById(tabId);
            selectedTab.classList.add('active');

            const navLinks = document.querySelectorAll('.sidebar .nav-link');
            navLinks.forEach(link => {
                link.classList.remove('active');
            });
            const selectedLink = document.querySelector(`[data-target="${tabId}"]`);
            selectedLink.classList.add('active');
        }
        function addCourse(){
            window.location.href="/Course/toPage?page=addCourse";
        }
    </script>
</head>

<body>
<!-- 顶部 -->
<div th:replace="header.html"></div>

<!-- 中间内容区域 -->
<div class="middle-content">

    <!-- 侧边导航 -->
    <div th:replace="nav.html" ></div>

    <!-- 内容区域 -->
    <div class="content">

        <button type="button" id="addCourseButton" class="btn btn-outline-primary" onclick="addCourse()">新增课程</button>

        <div class="tab-content">
            <!-- 课程列表 -->
            <div id="course-list" class="active">
                <table class="table table-striped">
                    <thead>
                    <tr>
                        <th scope="col">id</th>
                        <th scope="col">name</th>
                        <th scope="col">teacher_id</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr th:each="course:${courses}">
                        <th th:text="${course.id}"></th>
                        <td th:text="${course.name}"></td>
                        <td th:text="${course.teacher.name}"></td>
                        <td class="action-buttons">
                            <a th:href="@{/Course/remove(id=${course.id})}" class="btn btn-sm btn-outline-danger">删除</a>
                            <a th:href="@{/Course/toEdit(id=${course.id})}" class="btn btn-sm btn-outline-primary">修改</a>
                        </td>
                    </tr>
                    </tbody>
                </table>

                <nav aria-label="Page navigation example">
                    <ul class="pagination">
                        <li class="page-item">
                            <a class="page-link" th:href="@{/Course/list/{currPage}/3(currPage=${currPage}-1)}" aria-label="Previous">
                                <span aria-hidden="true">&laquo;</span>
                            </a>
                        </li>
                        <li class="page-item"><a class="page-link" th:href="@{/Course/list/1/3}">1</a></li>
                        <li class="page-item"><a class="page-link" th:href="@{/Course/list/2/3}">2</a></li>
                        <li class="page-item"><a class="page-link" th:href="@{/Course/list/3/3}">3</a></li>
                        <li class="page-item">
                            <a class="page-link" th:href="@{/Course/list/{currPage}/3(currPage=${currPage}+1)}" aria-label="Next">
                                <span aria-hidden="true">&raquo;</span>
                            </a>
                        </li>
                    </ul>
                </nav>

            </div>
        </div>
    </div>
</div>

<!-- 底部 -->
<div th:replace="footer.html"></div>

<script src="/bootstrap/js/jquery.js" crossorigin="anonymous"></script>
<script src="/bootstrap/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script>

</body>

</html>